<template>
  <section>
    <van-sticky>
      <div class="sticky-wrapper">
        <div class="flex row nav-wrapper">
          <div class="flex flex-1 flex-row flex-bottom pl20">
            <a class="white mr20" @click="$router.push({name: 'MemberIndex'})">缘分</a>
            <a class="current white">推荐</a>
          </div>
        </div>
      </div>
    </van-sticky>

    <div class="flex flex-col pt10 pb10 bg-color-white">
      <div class="flex flex-row flex-center font-larger strong" style="color: #6600cc;">推荐会员</div>
      <div class="flex flex-row flex-center mt5 font-common" style="color: #6600cc;">海量优质会员，还在等什么？</div>
    </div>


    <div class="clearfix">

      <van-list
        class="mt10"
        v-model="loading"
        :finished="finished"
        :finished-text="''"
        @load="requestData">
        <div class="member-list">
          <router-link
            :to="{ name: 'MemberProfile', query: { id: item.member.id }}"
            v-for="(item, index) in dataList"
            :key="index">
            <dl class="member-item">
              <dt class="member-photo">
                <img :src="item.member.photo_url ? item.member.photo_url : STATIC_BASE_URL + '/images/mp/gender.png'" />
                <h3>{{item.user.nick}}</h3>
              </dt>
              <dd class="member-info">
                <p class="text-center"><span v-if="item.member.birthday>0">{{item.member.age}}岁</span><span v-if="item.member.live_city_str"> · {{item.member.live_city_str}}</span><span v-if="item.member.height>0"> · {{item.member.height}}cm</span></p>
                <p class="text-center" v-if="item.member.house_status>0 || item.member.car_status>0 || item.member.job>0"><span v-if="item.member.house_status==20" class="mr5">有房</span><span v-if="item.member.car_status==20" class="mr5">有车</span><span v-if="item.member.job>0" class="mr5">{{item.member.job_str}}</span></p>
              </dd>
            </dl>
          </router-link>
        </div>
      </van-list>

    </div>

    <div class="pt20 pb20 text-center" v-if="finished">
      <router-link class="blue" :to="{name: 'MemberIndex'}">去查看更多会员</router-link>
    </div>

    <div class="empty-box"></div>

    <Tabbar active="home"/>
  </section>
</template>

<script>
import PageHeader from "../componets/PageHeader";
import Tabbar from "../componets/Tabbar";
import {memberRecommendUri, STATIC_BASE_URL} from "../../common/api";
import {MEMBER_RECOMMEND_TYPE_HOME} from "../../common/constants";

export default {
  components: {
    PageHeader,
    Tabbar
  },
  data() {
    return {
      STATIC_BASE_URL: STATIC_BASE_URL,

      currentPage: 1,
      lastPage: 0,
      total: 0,
      pageSize: 10,
      loading: false,
      finished: false,
      dataList: []
    }
  },
  methods: {
    requestData() {
      const that = this;
      this.loading = true;
      const url = memberRecommendUri + '?recommend_type='+MEMBER_RECOMMEND_TYPE_HOME+'&page_size=' + that.pageSize + '&page=' + that.currentPage;
      this.$http.get(url).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          that.toast(msg);
        } else {
          that.loading = false;
          if (that.currentPage >= data.last_page) {
            that.finished = true;
          }
          that.currentPage = that.currentPage + 1;
          for (let i = 0; i < data.data.length; i++) {
            that.dataList.push(data.data[i]);
          }
          that.total = data.total;
          that.lastPage = data.last_page;
        }
      }, response => {
        // error callback
      })
    }
  },
  mounted: function () {

  }
}
</script>

<style scoped>
.empty-box {
  height: calc(60px + env(safe-area-inset-bottom));
}

.nav-wrapper {
  background: #6600CC;
  color: #FFFFFF;
  padding: 15px 0;
  font-size: 14px;
}
.nav-wrapper .current {
  font-size: 18px;
  font-weight: bold;
}

.member-list a{
  color: #666666;
  text-decoration: none;
}
.member-item {
  margin-left: 3%;
  margin-right: 3%;
  width: 44%;
  border-radius: 6px;
  background: #ffffff;
  margin-bottom: 10px;
  float: left;
}
/*.member-item:nth-child(even) {*/
/*  margin-left: 3%;*/
/*}*/
/*.member-item:nth-child(odd) {*/
/*  margin-right: 3%;*/
/*}*/
.member-photo {
  position: relative;
  width: 100%;
  height: 0rem;
  padding-bottom: 123%;
}
.member-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.member-photo h3 {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #ffffff;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  position: absolute;
  padding: 0 10px;
}
.member-info {
  padding: 0 0;
  margin: 0 0;
  height: 50px;
}
.member-info p {
  font-size: 12px;
  padding: 5px 0;
  margin: 0 0 ;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
